import { useParams, Link } from '@tanstack/react-router';
import { Card, CardHeader, CardTitle, CardContent } from '../components/ui/card';
import { Badge } from '../components/ui/badge';
import { Button } from '../components/ui/button';
import Layout from '../components/Layout';
import { usePostQuery, useUserQuery } from '../hooks/useQueries';

export default function PostDetailPage() {
  const { postId } = useParams({ strict: false });
  const postIdNum = postId ? parseInt(postId) : 0;
  
  const { data: post, isLoading: postLoading, error: postError } = usePostQuery(postIdNum);
  const { data: user, isLoading: userLoading } = useUserQuery(post?.userId || 0);

  if (postLoading) {
    return (
      <Layout>
        <div className="space-y-4">
          <div className="flex items-center gap-4">
            <Button asChild variant="outline">
              <Link to="/posts">← Back to Posts</Link>
            </Button>
            <div className="h-8 bg-muted rounded w-48 animate-pulse"></div>
          </div>
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div className="lg:col-span-2">
              <Card className="animate-pulse">
                <CardHeader>
                  <div className="h-6 bg-muted rounded w-3/4"></div>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {Array.from({ length: 4 }).map((_, i) => (
                      <div key={i} className="h-4 bg-muted rounded"></div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </Layout>
    );
  }

  if (postError) {
    return (
      <Layout>
        <div className="space-y-4">
          <Button asChild variant="outline">
            <Link to="/posts">← Back to Posts</Link>
          </Button>
          <Card className="border-destructive">
            <CardContent className="pt-6">
              <p className="text-destructive">
                Error loading post: {postError.message}
              </p>
            </CardContent>
          </Card>
        </div>
      </Layout>
    );
  }

  if (!post) {
    return (
      <Layout>
        <div className="space-y-4">
          <Button asChild variant="outline">
            <Link to="/posts">← Back to Posts</Link>
          </Button>
          <Card>
            <CardContent className="pt-6">
              <p>Post not found</p>
            </CardContent>
          </Card>
        </div>
      </Layout>
    );
  }

  return (
    <Layout>
      <div className="space-y-6">
        <div className="flex items-center gap-4">
          <Button asChild variant="outline">
            <Link to="/posts">← Back to Posts</Link>
          </Button>
          <Badge variant="outline">Post #{post.id}</Badge>
          <Badge variant="secondary">User {post.userId}</Badge>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Post Content */}
          <div className="lg:col-span-2">
            <Card>
              <CardHeader>
                <CardTitle className="text-2xl">{post.title}</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="prose prose-sm max-w-none">
                  <p className="text-base leading-relaxed whitespace-pre-wrap">
                    {post.body}
                  </p>
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Sidebar */}
          <div className="space-y-6">
            {/* Post Info */}
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">Post Information</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div>
                    <p className="text-sm font-medium">Post ID</p>
                    <p className="text-sm text-muted-foreground">#{post.id}</p>
                  </div>
                  <div>
                    <p className="text-sm font-medium">Author ID</p>
                    <p className="text-sm text-muted-foreground">User {post.userId}</p>
                  </div>
                  <div>
                    <p className="text-sm font-medium">Word Count</p>
                    <p className="text-sm text-muted-foreground">
                      {post.body.split(' ').length} words
                    </p>
                  </div>
                  <div>
                    <p className="text-sm font-medium">Character Count</p>
                    <p className="text-sm text-muted-foreground">
                      {post.body.length} characters
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* Author Info */}
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">Author</CardTitle>
              </CardHeader>
              <CardContent>
                {userLoading ? (
                  <div className="space-y-2">
                    <div className="h-4 bg-muted rounded animate-pulse"></div>
                    <div className="h-3 bg-muted rounded w-3/4 animate-pulse"></div>
                  </div>
                ) : user ? (
                  <div className="space-y-4">
                    <div>
                      <p className="text-sm font-medium">Name</p>
                      <p className="text-sm text-muted-foreground">{user.name}</p>
                    </div>
                    <div>
                      <p className="text-sm font-medium">Username</p>
                      <p className="text-sm text-muted-foreground">@{user.username}</p>
                    </div>
                    <div>
                      <p className="text-sm font-medium">Email</p>
                      <p className="text-sm text-muted-foreground">{user.email}</p>
                    </div>
                    <div>
                      <p className="text-sm font-medium">Company</p>
                      <p className="text-sm text-muted-foreground">{user.company.name}</p>
                    </div>
                    <Button asChild size="sm" variant="outline" className="w-full">
                      <a href={`/users/${user.id}`}>View Profile</a>
                    </Button>
                  </div>
                ) : (
                  <p className="text-sm text-muted-foreground">Author information not available</p>
                )}
              </CardContent>
            </Card>

            {/* Actions */}
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">Actions</CardTitle>
              </CardHeader>
              <CardContent className="space-y-2">
                <Button variant="outline" size="sm" className="w-full">
                  Edit Post
                </Button>
                <Button variant="destructive" size="sm" className="w-full">
                  Delete Post
                </Button>
                <Button asChild variant="secondary" size="sm" className="w-full">
                  <Link to="/posts/create">Create New Post</Link>
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </Layout>
  );
} 